<template>
  <div class="app-role">
   <Query
     :items="queryColumns"
     :initial-params="queryParams"
     @query="handleQuery"
     labelWidth="100px"
   />
   <Table
     :table-columns="tableColumns"
     :table-loading="tableLoading"
     :table-data="tableData"
     :total="total"
     @pagination="handlePagination"
   >
     <template v-slot:tools>
       <el-button-group>
         <el-button type="primary" @click="handleAdd">创建模板</el-button>
       </el-button-group>
     </template>
     <template #productName="{row}">
        <div class="productName_box">
          <img class="productName_img" :src="row.coverImg" />
          <span>{{ row.productName }}</span>
        </div>
     </template>
     <template #opt="scope">
       <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
       <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
     </template>
   </Table>
   <DialogForm
     v-model:visible="showDialog"
     :title="dialogTitle"
     :form-items="formItems"
     :form-data="formData"
     :form-rules="formRules"
     :loading="loading"
     width="500px"
     @submit="handleSubmit"
   />
  </div>
</template>

<script setup name="productTemeplate">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import DialogForm from '@/components/FormDialog/index.vue'
import { getTemplateList, saveTemplate } from "@/api/goods";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)
const dialogTitle = ref('')
const loading = ref(false)
const showDialog = ref(false)
const router = useRouter();
const formRules = ref({
  productName: [
   { required: true, message: '请输入商品名称', trigger: 'blur' },
 ],
})
const prodTypeFormatter = function(row){
  const obj = {
    1: '实物商品',
    2: '虚拟商品',
  }
  return obj[row.prodType]
}
const formData = ref({})
const data = reactive({
 tableColumns: [
   { label: "商品名称", prop: "productName", slot: 'productName',width:300},
   { label: "商品类型", prop: "prodType",formatter:prodTypeFormatter },
   { label: "商品分类", prop: "roleName" },
   { label: "基础单位", prop: "unitName" },
   { label: "创建时间", prop: "gmtCreate" },
   { label: "操作",  prop: "opt", slot: 'opt'},
 ],
 queryColumns: [
  { label: "商品名称", prop: "productName", type: 'input', attrs: {placeholder:'请输入'}},
 ],
 pageParams: {
  current: 1,
  size: 10
 },
 queryParams: {},
 formItems: [
    {
     prop: 'roleName',
     label: '角色名称',
     type: 'input',
     placeholder: '请输入角色昵称'
   },
 ]
})

const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
  tableLoading.value = true
  const data  = {
     ...queryParams.value,
     ...pageParams.value
  }
  getTemplateList(data)
  .then(res => {
     tableData.value = res.data.records
     total.value = res.data.total
  })
  .finally(() => {
     tableLoading.value = false
  })
}
getList()
/** 搜索按钮操作 */
const handleQuery = (val) => {
 queryParams.value = val
 getList()
}
/** 打开新增弹窗 */
const handleAdd = () => {
  router.push('/productMgmt/productTelemplate/add')
}

/** 打开编辑弹窗 */
const handleEdit = (row) => {
dialogTitle.value = '编辑角色'
 // 重置表单数据
 formData.value = {
   id: row.id,
   roleName: row.roleName,
 }
 showDialog.value = true
}
/** 删除按钮操作 */
function handleDelete(row) {
 proxy.$modal.confirm('是否确认删除此数据？').then(function() {
  saveTemplate({id: row.id, delFlag: -1}).then(() => {
     getList()
     proxy.$modal.msgSuccess("删除成功")
   })
 })
}
const handlePagination = (val) => {
 pageParams.value = val
 getList()
}
const handleSubmit = async (data) => {
 loading.value = true
 try {
   // 这里调用API进行提交
   await saveTemplate(data)
   showDialog.value = false
   getList()
   proxy.$modal.msgSuccess("操作成功")
 } finally {
   loading.value = false
 }
}
</script>

<style lang="scss" scoped>
.productName_box{
  display: flex;
  align-items: center;
  .productName_img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-left: 8px;
  }
  span{

  }
}
.app-role {
 padding: 8px
}
</style>